<template>
	<div class="publicpageview">
		<div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">
					<el-form-item label="区房屋管理单位：" prop="dname" label-width="140px">
						<el-select :disabled='isluru' clearable v-model="listQuery.dname" @change='areaChange'>
							<div v-for="(item,index) in areaList" :key="index">
								<el-option :label="item.dname" :value="item.did" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="管理部(分中心)：" prop="manageDepartment" label-width="140px">
						<el-select :disabled='isluru' clearable v-model="listQuery.manageDepartment" @change='HouseChange'>
							<div v-for="(item,index) in HouseList" :key="index">
								<el-option :label="item.aname" :value="item.aid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="证件编号：" prop="certNo" label-width="140px">
						<el-input v-model="listQuery.certNo"></el-input>
					</el-form-item>
					<el-form-item label="地址：" prop="address" label-width="140px">
						<el-input v-model="listQuery.address"></el-input>
					</el-form-item>
					<el-form-item label="产权人：" prop="propertyPerson" label-width="140px">
						<el-select v-model="listQuery.propertyPerson">
							<div v-for="(item,index) in chanquanrenList" :key="index">
								<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="移交时间：" prop="handDate" label-width="140px">
						<el-date-picker style="width: 130px;" v-model="listQuery.handDate" type="date" placeholder="年/月/日">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="所号：" prop="blockno" label-width="140px">
						<el-input v-model="listQuery.blockno"></el-input>
					</el-form-item>
					<!-- <el-col :span="5">
							<el-form-item label="是否注销：" prop="status" label-width="140px">
								<el-select v-model="listQuery.status">
									<el-option label="发布" value="1" key="1"></el-option>
									<el-option label="不发布" value="0" key="0"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
				</div>
			</el-form>
			<div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
				<el-button size="mini" type="primary" @click="sumbitCx">查询</el-button>
				<el-button size="mini" @click="resetTop">重置</el-button>
				<el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
			</div>
		</div>

		<div class="publitableview">
			<!-- <el-button type="primary" size="mini" @click="openQuanxian">权限申请</el-button> -->
			<el-button type="primary" size="mini" @click="handleAddUser">资料录入</el-button>
			<el-button type="primary" size="mini" @click="handleout">导出</el-button>
			<el-table max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="区房屋管理单位" prop="dname">
				</el-table-column>

				<el-table-column align="center" label="管理部(分中心)" prop="aname">
				</el-table-column>

				<el-table-column align="center" label="地址" prop="address">
				</el-table-column>

				<el-table-column align="center" label="证件编号" prop="certNo">
				</el-table-column>

				<el-table-column align="center" label="产权人" prop="propertyPerson">
				</el-table-column>

				<el-table-column align="center" label="移交时间" prop="handDate">
					<template slot-scope="scope">
						{{scope.row.handDate?scope.row.handDate.split(' ')[0]:''}}
					</template>
				</el-table-column>

				<el-table-column align="center" label="注销时间" prop="endTime">
				</el-table-column>

				<el-table-column align="center" label="所号" prop="blockno">
				</el-table-column>

				<el-table-column align="center" label="操作" width="120">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="handleUpdate(scope.row.id)">修改</el-button>
						<el-button type="text" size="mini" @click="handledetail(scope.row.id)">详情</el-button>
						<el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.page" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>

		<!-- 弹窗部分 -->
		<el-dialog title="操作权限申请" :visible.sync="isQuanxian" width="50%" :before-close="handleClose">
			<el-form :model="qxQuery" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px">
				<el-form-item label="权限名称：" prop="permission">
					<el-select v-model="qxQuery.permission">
						<el-option label="产权-删除" value="产权-删除"></el-option>
						<el-option label="产权-修改" value="产权-修改"></el-option>
						<el-option label="产权-录入" value="产权-录入"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="申请人员：" prop="userName">
					<el-input v-model="qxQuery.userName" disabled></el-input>
				</el-form-item>

				<el-form-item label="生效开始时间：" prop="startTime">
					<el-date-picker v-model="qxQuery.startTime" type="date" placeholder="选择日期时间" align="right">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="生效结束时间：" prop="endTime">
					<el-date-picker v-model="qxQuery.endTime" type="date" placeholder="选择日期时间" align="right">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="申请缘由说明：" prop="remake">
					<el-input v-model="qxQuery.remake" type="textarea" :rows="2"></el-input>
				</el-form-item>
			</el-form>

			<div class="saveContent">
				<el-button type="primary" @click="qxSave" size="medium">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import * as XLSX from 'xlsx'
	import {
		certificateList,
		getArea,
		getHouseAdmin,
		delCertificate,
		permissionApply
	} from '@/api/industry'
	export default {
		name: 'AccommodationManagementChanquanzhengjian',

		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					houseAdmin: '',
					certNo: '',
					address: '',
					areaUnit: '',
					propertyPerson: '',
					handDate: '',
					blockno: '',
					manageDepartment: '',
					dname:''
				},
				total: 0,
				list: [],
				listLoading: false,
				dialogVisible: false,
				formData: {},
				isSearch: false,
				// 区房屋管理单位
				areaList: [],
				// 根据区获取部门
				HouseList: [],
				qxQuery: {
					endTime: '',
					permission: '',
					remake: '',
					startTime: '',
					userName: ''
				},
				isQuanxian: false,
				chanyeList: [],
				chanquanrenList: [],
				isluru:false
			}
		},
		computed: {

    },
		mounted() {
			if(localStorage.getItem('userHouseAdminId')>0){
				this.listQuery.areaUnit = localStorage.getItem('userDID')
				this.listQuery.dname = localStorage.getItem('userDname')
				this.listQuery.manageDepartment = localStorage.getItem('userHouseAdminName')
				this.listQuery.houseAdmin = localStorage.getItem('userHouseAdminId')
				this.isluru = true
			}
			// 遍历字典
			this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
			this.chanyeList.forEach((item, index) => {
				if (item.classname == '产权人单位') {
					this.chanquanrenList = item.classmidList
				}
			})

			this.getArea()
			this.certificateList()
		},

		methods: {
			// 权限申请
			openQuanxian() {
				this.isQuanxian = true
			},
			qxSave() {
				let data = this.qxQuery
				data.startTime = data.startTime ?
					dayjs(data.startTime).format('YYYY-MM-DD HH:mm:ss') :
					''
				data.endTime = data.endTime ?
					dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss') :
					''
					data.type = 0
				permissionApply(data).then((res) => {
					console.log(res)
					this.$message({
						type: 'success',
						message: '操作成功!'
					})
					this.isQuanxian = false
				})
			},
			getArea() {
				getArea().then((res) => {
					this.areaList = res.data
				})
			},
			getHouseAdmin(e) {
				getHouseAdmin({
					DID: e
				}).then((res) => {
					this.HouseList = res.data
				})
			},
			// 管片列表
			certificateList() {
				let data = {
					pageNum: this.listQuery.pageNum,
					pageSize: this.listQuery.pageSize,
					certNo: this.listQuery.certNo,
					address: this.listQuery.address,
					propertyPerson: this.listQuery.propertyPerson,
					handDate: this.listQuery.handDate ?
						dayjs(this.listQuery.handDate).format('YYYY-MM-DD HH:mm:ss') :
						'',
					blockno: this.listQuery.blockno,
					DID:this.listQuery.areaUnit,
					AID:this.listQuery.houseAdmin
				}
				this.listLoading = true
				certificateList(data).then((res) => {
					this.list = res.data.list
					this.total = res.data.total
					this.listLoading = false
				})
			},
			// 选择区房屋管理
			areaChange(e) {
				console.log(e)
				if(e){
					this.listQuery.areaUnit = e
					this.getHouseAdmin(e)
				}
					this.listQuery.houseAdmin = ''

			},
			// 根据区获取部门
			HouseChange(e) {
				console.log(e)
				this.listQuery.houseAdmin = e
			},
			// 查询
			sumbitCx() {
				this.certificateList()
			},
			resetTop() {
				;
				(this.listQuery.pageNum = 1),
				(this.listQuery.pageSize = 20),
				(this.listQuery.certNo = ''),
				(this.listQuery.address = ''),
				(this.listQuery.propertyPerson = ''),
				(this.listQuery.handDate = ''),
				(this.listQuery.blockno = '')
			},
			handleAddUser() {
				this.$router.push('chanquanziliaoluru')
			},
			resetForm(val) {
				console.log('1')
				this.$refs[val].resetFields()
			},

			handleSizeChange(val) {
				this.listQuery.pageNum = 1
				this.listQuery.pageSize = val
				this.certificateList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.certificateList()
			},
			handleDelete(id) {
				this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							id: id
						}
						delCertificate(data).then((res) => {
							this.certificateList()
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			handleUpdate(id) {
				this.$router.push({
					path: 'chanquanziliaoluru',
					query: {
						id: id,
						type: 1
					}
				})
			},
			handledetail(id) {
				this.$router.push({
					path: 'chanquanziliaoluru',
					query: {
						id: id,
						type: 2
					}
				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						done()
					})
					.catch((_) => {})
			},
			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							pageNum: this.listQuery.pageNum,
							pageSize: 999999,
							certNo: this.listQuery.certNo,
							address: this.listQuery.address,
							propertyPerson: this.listQuery.propertyPerson,
							handDate: this.listQuery.handDate ?
								dayjs(this.listQuery.handDate).format('YYYY-MM-DD HH:mm:ss') :
								'',
							blockno: this.listQuery.blockno
						}
						certificateList(data).then((res) => {
							let list = res.data.list
							let outList = []
							res.data.list.forEach((item, index) => {
								outList.push({
									区房屋管理单位: item.dname,
									'管理部(分中心)': item.aname,
									地址: item.address,
									证件编号: item.certNo,
									产权人: item.propertyPerson,
									移交时间: item.handDate,
									注销时间: item.endTime,
									所号: item.blockno
								})
							})
							// 获取表格数据
							const data = outList
							// 转换数据为工作表
							const worksheet = XLSX.utils.json_to_sheet(data)
							// 创建新的工作簿
							const workbook = XLSX.utils.book_new()
							// 将工作表添加到工作簿
							XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
							// 导出Excel文件
							XLSX.writeFile(workbook, '产权证件.xlsx')
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消导出'
						})
					})
			}
		}
	}
</script>
<style scoped>
	/deep/.el-input__inner {
		width: 130px;
	}

	/deep/.publicpaginationview .el-input__inner {
		width: 100px;
	}

	/deep/.publicpaginationview .is-in-pagination .el-input__inner {
		width: 50px;
	}
</style>
